// system-notice.js
Component({
  properties: {
    hasNewNotice: {
      type: Boolean,
      value: true
    },
    noticeContent: {
      type: String,
      value: ''
    },
    noticeDate: {
      type: String,
      value: ''
    },
    statusBarHeight: {
      type: Number,
      value: 0
    },
    topSpacing: {
      type: Number,
      value: 0
    },
    scrollViewPaddingTop: {
      type: Number,
      value: 0
    },
    topSpacing: {
      type: Number,
      value: 0
    }
  },

  data: {
    // 动画相关数据
    scale: 0.2, // 初始为小尺寸，模拟从图标展开
    opacity: 0,
    showNoticeIcon: true,
    iconOpacity: 1,
    iconScale: 1,
    noticeAnimation: {},
    // 动画状态
    isAnimating: false,
    isCollapsed: false,
    // 图标位置信息，用于定位展开的起始点
    iconPosition: {
      x: 30,
      y: 30
    }
  },

  lifetimes: {
    attached() {
      // 组件挂载时初始化
      this.initNotice();
    },
    detached() {
      // 清理定时器
      if (this.collapseTimer) {
        clearTimeout(this.collapseTimer);
      }
    }
  },

  methods: {
    // 初始化公告
    initNotice() {
      if (this.data.hasNewNotice) {
        // 先延迟一下，让图标显示
        setTimeout(() => {
          // 从图标展开动画
          this.expandFromIcon();
          
          // 5秒后自动收缩
          this.collapseTimer = setTimeout(() => {
            this.collapseNotice();
          }, 5000);
        }, 300);
      }
    },
    
    // 从图标展开的动画
    expandFromIcon() {
      if (this.data.isAnimating) return;
      
      this.setData({ isAnimating: true });
      
      // 使用CSS过渡实现从图标展开的动画
      // 设置动画起始点 - 从图标位置开始
      this.setData({
        showNoticeIcon: false, // 隐藏图标
        opacity: 1,
        scale: 1,
        height: 'auto'
      });
      
      // 动画结束后重置状态
      setTimeout(() => {
        this.setData({
          isAnimating: false
        });
      }, 500);
    },

    // 播放醒目的提醒动画
    playAttentionAnimation() {
      const animation = wx.createAnimation({
        duration: 1000,
        timingFunction: 'ease-in-out',
        delay: 0
      });

      // 创建脉动效果
      animation.scale(1.02).step();
      animation.scale(1).step();
      animation.scale(1.02).step();
      animation.scale(1).step();

      this.setData({
        noticeAnimation: animation.export()
      });
    },

    // 收缩公告到顶部图标
    collapseNotice() {
      if (this.data.isAnimating || this.data.isCollapsed) return;
      
      this.setData({ isAnimating: true });
      
      // 使用CSS过渡实现收缩到图标的动画
      this.setData({
        opacity: 0,
        scale: 0.2, // 缩小到图标的大小
        height: 0
      });
      
      // 动画结束后显示图标
      setTimeout(() => {
        this.setData({
          showNoticeIcon: true,
          iconOpacity: 1,
          iconScale: 1,
          isCollapsed: true,
          isAnimating: false
        });
      }, 500);
    },

    // 点击公告
    onNoticeTap(e) {
      if (this.data.isAnimating) return;
      
      // 移除触发弹窗的逻辑，只保留基本功能
      // 可以选择触发简单的点击事件，但不弹出窗口
    },

    // 点击关闭按钮
    onCloseTap(e) {
      if (this.data.isAnimating) return;
      
      // 清理定时器
      if (this.collapseTimer) {
        clearTimeout(this.collapseTimer);
      }
      
      this.setData({ isAnimating: true });
      
      // 使用CSS过渡实现收缩到图标的动画
      this.setData({
        opacity: 0,
        scale: 0.2, // 缩小到图标的大小
        height: 0
      });
      
      // 动画结束后显示图标
      setTimeout(() => {
        this.setData({
          showNoticeIcon: true,
          iconOpacity: 1,
          iconScale: 1,
          isCollapsed: true,
          isAnimating: false
        });
      }, 500);
      
      this.triggerEvent('noticeclose');
    },

    // 点击图标
    onIconTap() {
      if (this.data.isCollapsed && !this.data.isAnimating) {
        // 从图标再次展开公告
        this.setData({ isCollapsed: false });
        this.expandFromIcon();
      }
      // 移除noticeiconclick事件触发
    }
  }
});